<template>
  <!--其中社会实践情况-->
  <div class="edu-page-warp">
    <!--新增，编辑弹框-->
    <SubjectDialog ref="subjectDialog" @subjectSubmit="onSubmit" :subjectDialogVisible="dialogVisible" :subjectForm="subjectForm" :itemInfo="formItemInfo" @subjectClose="subjectClose"></SubjectDialog>
    <el-card shadow="never">
      <div class="edu-page-title">{{$t('graduationDesign.socialPractice')}}</div>
      <div class="edu-opertion-bar">
        <div class="float-right">
          <el-button type="primary" @click="onAdd">{{$t('graduationDesign.add')}}</el-button>
        </div>
      </div>
      <edu-table ref="subjectPracticeTable" :url="getPracticeList" :selection="false">
        <edu-table-column :label="$t('graduationDesign.socialPractice')" prop="display" min-width="90"></edu-table-column>
        <edu-table-column :label="$t('graduationDesign.applicableGraduationYear')" min-width="110">
          <template slot-scope="scope">
            <span>{{scope.row.startYear}}~{{scope.row.endYear ? scope.row.endYear : $t('graduationDesign.after')}}</span>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('graduationDesign.operation')" min-width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="onEdit(scope.row)">{{$t('graduationDesign.edit')}}</el-button>
            <el-button type="text" @click="onDelete(scope.row)">{{$t('graduationDesign.delete')}}</el-button>
          </template>
        </edu-table-column>
      </edu-table>
    </el-card>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/subjectMaintain";
export default {
  name: '',
  data() {
    return {
      getPracticeList: '/api/designservice/settingSubjectSociaPractice/queryByPage',
      api: API,
      queryForm: {},
      formItemInfo: {
        label: this.$t('graduationDesign.socialPractice'),
        value: "sociaPractice",
        actionType: ""
      },
      subjectForm: {
        subjectList: [],
        startYear: '',
        endYear: ''
      },
      dialogVisible: false
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    searchList() {
      this.$refs.subjectPracticeTable.search(this.queryForm);
    },
    onAdd() {
      this.formItemInfo.actionType = "ADD";
      this.dialogVisible = true;
      this.$refs['subjectDialog'].setSubjectForm({
        subjectList: [{ value: "", deleteStatus: false }],
        startYear: '',
        endYear: ''
      });
      this.$nextTick(() => {
        this.$refs.subjectDialog.$refs["subjectForm"].clearValidate();
      });
    },
    // 格式化课题来源数据
    subjectListFormat(data = []) {
      let dataset = [];
      data.forEach((item, index) => {
        item.value = item.sociaPractice;
        dataset.push(item);
      });
      return dataset;
    },
    onEdit(row) {
      this.formItemInfo.actionType = "EDIT";
      this.dialogVisible = true;
      // 查详情
      const params = { ...row };
      this.api.getPracticeDetail(params).then(res => {
        this.subjectForm = { ...row };
        this.$refs['subjectDialog'].setSubjectForm({
          subjectList: this.subjectListFormat(res.data),
          startYear: row.startYear.toString(),
          endYear: (row.endYear || '').toString()
        });
        this.$forceUpdate();
      }).catch();
    },
    onDelete(row) {
      this.$delConfirm(this.$t('graduationDesign.deleteConfirm'), this.$t('graduationDesign.prompt')).then(() => {
        const params = { ...row };
        this.api.practiceDelete(params).then(res => {
          this.$message.success(this.$t('graduationDesign.deleteSuccess'));
          this.searchList();
        }).catch(() => { });
      }).catch(() => { });
    },
    onSubmit(data) {
      this.$refs.subjectDialog.$refs["subjectForm"].validate((valid) => {
        if (valid) {
          if (!this.$refs.subjectDialog.validateAddItem()) {
            return false;
          }
          if (data.endYear && data.endYear < data.startYear) {
            this.$eduAlert(this.$t('graduationDesign.startTimeNotGreaterEndTime'), this.$t('graduationDesign.prompt'));
            return false;
          }
          // 提交接口
          let promise = null;
          if (this.formItemInfo.actionType === "ADD") {
            promise = this.api.practiceInsert(data.list);
          } else {
            promise = this.api.practiceUpdate(data.list);
          }
          promise.then(res => {
            this.$message.success(this.$t('graduationDesign.submitSuccess'));
            this.dialogVisible = false;
            this.searchList();
          }).catch(() => { });

        } else {
          return false;
        }
      });
    },
    subjectClose() {
      this.dialogVisible = false;
    }
  },
  components: {
    SubjectDialog: () => import('./subjectDialog')
  }
};
</script>
